<template>
    <div class="section-wrap formwork">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目名称</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{userInfo.departsir == 2?userInfo.pdeptname:dataList.ProjectName}}
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>拆除部位</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <x-textarea :placeholder="('请输入部位描述(自行换行)')"
                                :max="20"
                                :height="60"
                                v-model="dataList.DismantlingPart"></x-textarea>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>标高范围</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <x-textarea :placeholder="('请输入标高范围(自行换行)')"
                                :height="60"
                                v-model="dataList.remark"></x-textarea>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>作业开始日期</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <datetime :start-date="showDate"
                              v-model="dataList.StartDate"
                              @on-confirm="changeStartTime"></datetime>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>作业结束日期</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <datetime :start-date="showDateEnd"
                              v-model="dataList.EndDate"
                              @on-confirm="changeEndTime"></datetime>
                </group>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>混凝土养护是否合格</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': spot}"
                         @click="spot=true">
                        合格
                    </div>
                    <div :class="{'active': !spot}"
                         @click="spot=false">
                        不合格
                    </div>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>同条件混凝土试块试压强度</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': spot2}"
                         @click="spot2=true">
                        合格
                    </div>
                    <div :class="{'active': !spot2}"
                         @click="spot2=false">
                        不合格

                    </div>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>混凝土强度</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': spot3}"
                         @click="spot3=true">
                        合格
                    </div>
                    <div :class="{'active': !spot3}"
                         @click="spot3=false">
                        不合格
                    </div>
                </div>
            </div>
        </div>
        <div class="form-section">
            <div class="saveFiretit">
                安全措施
            </div>

            <div class="saveChecklist"
                 v-for="(checkOne,index) in commonList">
                <input class="saveCheckInp"
                       type="checkbox"
                       :class="{'checkedopt': checkStatusList.indexOf(checkOne)>=0}"
                       :checked="checkStatusList.indexOf(checkOne)>=0"
                       @click='checkedOne(checkOne)'>
                <span>{{checkOne}}</span>
            </div>

            <!-- 审批信息 -->
            <div class="approveBox"
                 v-if='approveStatus'>
                <div class="approveTit">审批信息</div>
                <div class="approveWrap"
                     v-if='dataList.ApproveInfo.length>0'
                     v-for="(item,index) in dataList.ApproveInfo"
                     :key="index">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <textarea class="areainfo"
                                      height="500"
                                      placeholder="请输入审批意见"
                                      v-model="item.Remark"
                                      :disabled="isDisable"></textarea>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApproveResult}}
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApprovePersonName}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="btns"
                 v-if="syself">
                <button @click="toSubmit">提交</button>
            </div>
        </div>

        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        myMenu
    },
    data () {
        return {
            dataList: {
                ProjectName: '', // 项目名称
                DeptName: '', // 申请单位名称
                StartDate: this.getDate(), // 动火开始日期
                EndDate: this.getDate(), // 动火结束日期
                DismantlingPart: '', // 拆除部位
                remark: '', // 标高范围
                PlanText: '' // 安全措施选择集合（字符串）

            },
            spot: true, // 是否合格
            spot2: true,
            spot3: true,
            commonList: ['动火方案', '配备灭火器', '明确动火监护人', '动火点周围可燃材料已清理', '动火人配备安全防护用品(如防护罩、防护手套等）', '是否动火旁站监督'], // 安全措施列表
            checkStatusList: [], // 已选安全措施集合
            role: '', // 检查单位
            userId: '',
            tokenId: '',
            projectId: '', // 申请单位id
            userInfo: '',
            showDate: this.getDate(), // 作业开始时间最小日期
            showDateEnd: this.getDate(), // 作业结束时间最小日期
            addFlag: true,// 提交开关（避免多次提交）                      
            approveStatus: false,//是否展示审批信息  
            isDisable: true,
            syself: true
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        this.projectorclass = this.$store.state.checkcompany.Category // 被检查单位
        this.role = this.userInfo.departsir
        this.dataList.ProjectName = this.userInfo.deptname
        this.dataList.DeptName = this.userInfo.deptname
        this.checkStatusList = Object.assign([], this.commonList)// 全选
        if (this.$route.query.id) {
            this.getData()
        }
    },
    methods: {
        // 获取详情数据
        getData () {
            let that = this
            let param = {
                'allowPaging': true,
                'business': 'GetTemplateDismantlingJob',
                'data': {
                    'id': this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': 'CD9D3B5786AF0333B02C53F1A84C45B6',
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    // console.log(res)
                    that.dataList = res.data.data
                    that.checkStatusList = that.dataList.PlanText.split(',')
                    that.spot = that.toBool(res.data.data.JobItem1)
                    that.spot2 = that.toBool(res.data.data.JobItem2)
                    that.spot3 = that.toBool(res.data.data.JobItem3)
                    if (that.dataList.StartDate) {
                        that.$set(that.dataList, 'StartDate', that.dataList.StartDate.substring(0, 10))
                    }
                    if (that.dataList.EndDate) {
                        that.$set(that.dataList, 'EndDate', that.dataList.EndDate.substring(0, 10))
                    }

                    that.syself = res.data.data.CanEdit
                    if (res.data.data.ApproveInfo.length > 0) {
                        this.approveStatus = true
                    }
                }
            ).catch(response => {

            })
        },
        // 点击申请提交
        toSubmit () {
            if (!this.dataList.DismantlingPart || !this.dataList.remark) {
                this.$vux.toast.text('请完善相应信息')
                return false
            }
            if (!this.addFlag) {
                return false
            }
            this.addFlag = false
            this.$vux.loading.show({
                text: '正在提交中...'
            })
            let params = {
                'allowPaging': true,
                'business': 'SetTemplateDismantlingJob',
                'data': {
                    'id': this.$route.query.id,
                    'projectName': this.dataList.ProjectName,
                    'projectId': this.projectId,
                    'deptName': this.userInfo.deptname,
                    'deptId': this.userInfo.deptid,
                    'startDate': this.dataList.StartDate,
                    'endDate': this.dataList.EndDate,
                    'DismantlingPart': this.dataList.DismantlingPart,
                    'remark': this.dataList.remark,
                    'JobItem1': this.toStr(this.spot),
                    'JobItem2': this.toStr(this.spot2),
                    'JobItem3': this.toStr(this.spot3),
                    'PlanText': this.checkStatusList.join(','),
                    'personId': this.userId,
                    'personName': this.userInfo.username
                },
                'method': 'send',
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': 'C7E7148D38F4E0DBECD202F53898702C',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.$vux.toast.text('提交成功')
                    // this.$router.push({
                    //     path: '/workrisk'
                    // })
                    this.$router.go(-1)
                } else {
                    this.addFlag = true
                }
            }).catch(() => {
                this.addFlag = true
            })
        },
        // 获取当前年月日
        getDate () {
            let nowDate = new Date()
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate()
            }
            if (date.month >= 0 && date.month < 10) {
                date.month = '0' + date.month
            }
            if (date.date >= 0 && date.date < 10) {
                date.date = '0' + date.date
            }
            let systemDate = date.year + '-' + date.month + '-' + date.date
            return systemDate || ''
        },
        // 验证开始和结束时间
        checkTime (startTime, endTime, tip) {
            if (startTime.length > 0 && endTime.length > 0) {
                var startTmp = startTime.split('-')
                var endTmp = endTime.split('-')
                var sd = new Date(startTmp[0], startTmp[1], startTmp[2])
                var ed = new Date(endTmp[0], endTmp[1], endTmp[2])
                if (sd.getTime() > ed.getTime()) {
                    // this.$vux.toast.text("开始日期不能大于结束日期");
                    return false
                }
            }
            return true
        },
        // 切换开始时间,结束时间不小于开始时间
        changeStartTime (val) {
            if (!this.checkTime(val, this.dataList.EndDate)) {
                // this.$set(this.hiddenmeta,'resolveStartTime',this.getDate())
                this.$set(this.dataList, 'EndDate', this.dataList.StartDate)
            }
            this.showDateEnd = this.dataList.StartDate
        },
        // 切换结束时间
        changeEndTime (val) {
            if (!this.checkTime(this.dataList.StartDate, val)) {
                this.$set(this.dataList, 'EndDate', this.dataList.StartDate)
            }
        },
        // 安全措施多选
        checkedOne (val) {
            var idIndex = this.checkStatusList.indexOf(val)
            if (idIndex >= 0) {
                this.checkStatusList.splice(idIndex, 1)
            } else {
                this.checkStatusList.push(val)
            }
        },
        // 字符串转化
        toStr (val) {
            if (val == true) {
                return '是'
            } else if (val == false) {
                return '否'
            }
        },
        toBool (val) {
            if (val == '是') {
                return true
            } else if (val == '否') {
                return false
            }
        }
    }
}
</script>
<style lang="less" scoped>
.right-select {
    font-size: 14px;
    color: #999;
}
.right-select > i {
    color: #999;
}
.btns .green {
    // background: #15bc84;
}
.newcompanyList {
    font-size: 14px;
    text-align: right;
    color: #999;
}
.saveFiretit {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #efeff4;
    margin-left: 20px;
    color: #2269ff;
    font-size: 15px;
}
.saveChecklist {
    display: flex;
    align-items: center;
    height: 55px;
    line-height: 55px;
    font-size: 13px;
    margin-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #efeff4;
}
.saveChecklist span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;
    font-size: 14px;
    color: #333;
}
.saveCheckInp {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    background: #fff url('../../../assets/hideManage/uncheckedicon.jpg')
        no-repeat 0 0;
    background-size: 15px 15px;
}
.saveCheckInp.checkedopt {
    background: #fff url('../../../assets/hideManage/checkedicon.jpg') no-repeat
        0 0;
    background-size: 15px 15px;
}
.select-section {
    display: flex;
    display: -webkit-flex;
    font-size: 14px;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 38px;
}
.select-section .active {
    background: url(../../../../static/images/selected.png) no-repeat left
        center;
    background-size: 17px 17px;
}
.formwork .form-item label {
    // width: 170px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>
<style>
.formwork .vux-cell-value {
    color: #999;
}
.formwork .vux-x-textarea {
    width: 100%;
    border: 0 !important;
}
.formwork .form-item .textarea,
.formwork .form-item textarea {
    font-size: 14px;
    color: #999;
    font-family: '微软雅黑';
}
.formwork .form-item .select-section div:first-child {
    margin-right: 8px;
}
.approveBox {
    border-top: 10px solid #ebeef2;
}
.approveBox .approveTit {
    height: 55px;
    line-height: 55px;
    margin-left: 20px;
    font-size: 15px;
    color: #2269ff;
    border-bottom: 1px solid #efeff4;
}
.approveBox .approveWrap {
    border-bottom: 5px solid #ebeef2;
}
.approveBox .approveWrap:last-child {
    /* border: none; */
}
</style>
